@import '@/styles/common/variables.scss';
@keyframes a_banner_s_line {
	0%{ transform:scale(1,1);-webkit-transform:scale(1,1);-ms-transform:scale(1,1);-moz-transform:scale(1,1);-o-transform:scale(1,1); transform-origin:50% 100%;-webkit-transform-origin:50% 100%;-ms-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-o-transform-origin:50% 100%; opacity: 1;}
	20%{ transform:scale(1,0.01);-webkit-transform:scale(1,0.01);-ms-transform:scale(1,0.01);-moz-transform:scale(1,0.01);-o-transform:scale(1,0.01); transform-origin:50% 100%;-webkit-transform-origin:50% 100%;-ms-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-o-transform-origin:50% 100%; opacity: 1;}
	30%{ transform:scale(1,0.01);-webkit-transform:scale(1,0.01);-ms-transform:scale(1,0.01);-moz-transform:scale(1,0.01);-o-transform:scale(1,0.01); transform-origin:50% 100%;-webkit-transform-origin:50% 100%;-ms-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-o-transform-origin:50% 100%; opacity: 0;}
	31%{ transform:scale(1,0.01);-webkit-transform:scale(1,0.01);-ms-transform:scale(1,0.01);-moz-transform:scale(1,0.01);-o-transform:scale(1,0.01); transform-origin:50% 0;-webkit-transform-origin:50% 0;-ms-transform-origin:50% 0;-moz-transform-origin:50% 0;-o-transform-origin:50% 0; opacity: 0;}
	50%{  transform:scale(1,1);-webkit-transform:scale(1,1);-ms-transform:scale(1,1);-moz-transform:scale(1,1);-o-transform:scale(1,1); transform-origin:50% 0;-webkit-transform-origin:50% 0;-ms-transform-origin:50% 0;-moz-transform-origin:50% 0;-o-transform-origin:50% 0; opacity: 1;}
	100%{  transform:scale(1,1);-webkit-transform:scale(1,1);-ms-transform:scale(1,1);-moz-transform:scale(1,1);-o-transform:scale(1,1); transform-origin:50% 100%;-webkit-transform-origin:50% 100%;-ms-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-o-transform-origin:50% 100%; opacity: 1;}
 }

 .home{
  // .banner_container{
    // position: relative;
    .banner{
      position: relative;
      // background-color: #ffffff;
      // height: 937px;
      height: 100vh;
      text-align: center;
      .video-player{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .banner-item{
        position: relative;
        .bannerItem{
          height: 100vh;
          width: 100%;
        }
        .el-image{
          width: 100%;
          height: 100%;
          cursor: pointer;
          .el-image__inner{
            object-fit: cover;
          }
        }  
        .title_con  {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          .title{
            position: relative;
            top: 100px;
            left: 200px;
            color: #ffffff;
            width: 100%;
            text-align: left;
            word-break: break-word;
            line-height: 1;
          }
          .subTitle{
            position: relative;
            top: 200px;
            left: 200px;
            width: 100%;
            color: #ffffff;
            text-align: left;
            word-break: break-word;
            line-height: 1;
            .more{
              position: absolute;
              margin-top: 40px;
            }
          }
        }
    
      }
  
      
      
  
    }
    
    .swiperFooter{
      width: 100%;
      height: 100%;
    }
    
    

  // }
  .slide_tips{
    display: block;
    width: 30px;
    height: 57px;
    position: absolute;
    left: 50%;
    margin-left: -15px;
    bottom: 32px;
    z-index: 2;
    .s_line{
      display: block;
      width: 2px;
      height: 32px;
      border-radius: 2px;
      position: absolute;
      left: 50%;
      margin-left: -1px;
      top: 0px;
      background: #191919;
      animation: a_banner_s_line 3s  linear both infinite;
      -webkit-animation: a_banner_s_line 3s  linear both infinite;
      -ms-animation: a_banner_s_line 3s  linear both infinite;
      -moz-animation: a_banner_s_line 3s  linear both infinite;
      -o-animation: a_banner_s_line 3s  linear both infinite;
    }
    .txt{
      display: block;
      width: 100%;
      position: absolute;
      left: 0;
      text-align: center;
      bottom: 0px;
      font-size: 12px;
      letter-spacing: 2px;
      color: #191919;
    }
  }
  .swiperF {
    height: 100vh;
    .swiper-slide{
      height: auto;
    }
  }
  .footer_div_block{
    opacity: 0;
  }
  .footer_div{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;

  }

 }



 .bgc_black{ //黑色背景
   .slide_tips{
     .txt{
       color: #ffffff;
     }
     .s_line{
       background-color: #ffffff;
     }
   }
 }


.home {
  @include respond('768'){
    .slide_tips{
      bottom: 16px;
    }
    
    .banner_container{
      .swiper-container.banner {
        height: 100%;
        .swiper-slide {
          .title_con{
            .subTitle, 
            .title{
              text-align: center;
            }
          }

        }
      }
     
    } 
  }
}